<template>




  <div class="list" ref="wrapper">
    <div >
   <div class="content">
        <div class="area">
      <div class="title border-topbottom">当前城市</div>
      <div class="button-list">
        <div class="button-wrapper">
          <div class="button">{{this.$store.state.city}}</div>
        </div>
      </div>
    </div>
<!--        <div class="area">-->
<!--      <div class="title border-topbottom">热门城市</div>-->
<!--          <div class="city-list">-->
<!--            <div class="list-one"  v-for="(item,index) in list">-->
<!--              <div class="button-wrapper">-->
<!--                <div class="button">{{item.name}}</div>-->
<!--              </div>-->

<!--            </div>-->

<!--      </div>-->

<!--    </div>-->
     <div class="area">
       <div class="title border-topbottom">热门城市</div>
       <div class="button-list">
         <div class="button-wrapper" v-for="(item,index) in list" @click.prevent="handleCityClick(item.name)">
           <div class="button">{{item.name}}</div>
         </div>

       </div>
     </div>
     <p class="goods-p">
       字母排序
     </p>
     <div class="area" v-for="(item,index) in cities " :key="index" :ref="index">
       <div class="title border-topbottom" >
         {{index}}
       </div>
       <div class="item-list" v-for="i in item" :key="i.id" >
         <div class="item border-bottom" @click.stop="handleCityClick(i.name)">


             {{i.name}}


         </div>

       </div>
     </div>

     <!--        <div class="list-content">-->
<!--          <ul>-->
<!--                      <li class="content-li" v-for="(v,k) in Object.keys(obj).sort()">-->
<!--                        {{v}}-->
<!--                        <ol class="list-ol" >-->
<!--                            <li v-for="(item,key) in obj[v]" @click="add(item)">-->

<!--                            </li>-->

<!--                        </ol>-->
<!--                      </li>-->
<!--                    </ul>-->
<!--    </div>-->

<!--        <div class="area">-->
<!--      <div class="title border-topbottom">-->
<!--        B-->
<!--      </div>-->
<!--      <div class="item-list">-->
<!--        <div class="item border-bottom">阿拉尔</div>-->
<!--        <div class="item border-bottom">阿拉尔</div>-->
<!--        <div class="item border-bottom">阿拉尔</div>-->
<!--        <div class="item border-bottom">阿拉尔</div>-->
<!--        <div class="item border-bottom">阿拉尔</div>-->
<!--      </div>-->
<!--    </div>-->
   </div>
  </div>
</div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import axios from "axios"

    export default {
        name: "city",
      props:{
          letter:String,
          cities:Object
      },
      components:{},
        data(){
          return{
              list:[],


            title:"北京"
          }
        },
      mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper)
        axios.get("/static/data/city.json").then((res)=>{
          this.list=res.data.data.hotCities

        })

      },
      methods:{
          add(item){
            this.title=item.name
          },
        handleCityClick(item){

          this.$store.commit("changCtiy",item)
          this.$router.push("/")
        }
      },
      watch:{
        letter(){
          if (this.letter) {
            const element = this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
          }
        }
      }

    }
</script>

<style lang="stylus" scoped>
  /*@import "../../../assets/styles/varibles.styl";*/
.border-topbottom

    &:before
      border-color: #ccc
    &:after
      border-color: #ccc

  .border-bottom
    &:before
      border-color: #ccc

  .list

    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    // background:red
    .title
      line-height: .54rem
      background: #eee
      padding-left: .2rem
      color: #666
      font-size: .26rem
.button-list
  overflow: hidden
  padding: .1rem .6rem .1rem .1rem
  .button-wrapper
    float: left
    width: 33.33%
    .button
      margin: .1rem
      padding: .1rem 0
      text-align: center
      border: .02rem solid #ccc
      border-radius: .06rem

    .item-list
      .item
        line-height: .76rem
        padding-left: .2rem
  .list-content
    height 10rem
    ul
      .content-li
        border-bottom #333333 solid 0.01rem
        margin-left 0.1rem
        margin-top 0.1rem
        ol
          li
            margin-left 0.1rem
            margin-top 0.1rem
            margin-bottom  0.1rem
      a
        color #000000

.goods-p
        height .7rem
        background-color: #eee
        line-height .7rem
        padding-left .2rem
        margin-top .2rem
</style>
